<template>
    <div>
      <div>
        <el-input v-model="Roleinput" placeholder="请输入角色id来搜索" clearable style="width: 20%" ></el-input>
        <el-input v-model="Roleinput2" placeholder="请输入角色名称来搜索" clearable style="width: 20%" ></el-input>
        <el-input v-model="Roleinput3" placeholder="请输入角色权限来搜索" clearable style="width: 20%" ></el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="selectRole">查询按钮</el-button>
        <el-button type="primary" icon="el-icon-download" @click="exportRole">导出ecexl</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="operAddRole">添加权限</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="operUploadPage">打开文件导入</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="openRoleRourcesWith">添加用户权限</el-button>
      </div>
      <div>
        <el-table
          :data="Roletable"  @selection-change="checkRole"
          stripe
          style="width: 100%" >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色名">
          </el-table-column>
          <el-table-column
            prop="roleId"
            label="角色id">
          </el-table-column>
          <el-table-column
            prop="roleAuthority"
            label="角色权限">
          </el-table-column>
          <el-table-column
            prop="createdBy"
            label="创建人员">
          </el-table-column>
          <el-table-column
            prop="updateBy"
            label="更新人员">
          </el-table-column>
          <el-table-column
            prop="createdDate"
            label="创建日期">
          </el-table-column>
          <el-table-column
            prop="updateDate"
            label="更新日期">
          </el-table-column>
          <el-table-column label="操作"   fixed="right"   width="200"  header-align="center">
            <template slot-scope="scope"  style="height: 50%; " >
              <el-button size="mini" icon="el-icon-circle-plus" @click="operEditRole(scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-minus"   @click="delRole(scope.row)">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog :title="tableNmae" :visible.sync="dialogFormVisible" @close="closeRole">
        <el-form :model="RoleForm" >
          <el-form-item label="角色id" :label-width="formLabelWidth"  v-if="this.Operation!='add' ">
            <el-input v-model="RoleForm.roleId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色名称" :label-width="formLabelWidth" >
            <el-input v-model="RoleForm.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色权限" :label-width="formLabelWidth">
            <p>角色权限添加默认添加字符串 ROLE_，编辑时角色没有默认添加 ROLE_，请编辑时要有 ROLE_，这个是 spring security要求的格式</p>
            <el-input v-model="RoleForm.roleAuthority" autocomplete="off" >ROLE_</el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeRole">取 消</el-button>
          <el-button  @click="commitRoleOperation(Operation)">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="上传文件" :visible.sysible="uploadLabelwidth"  @close="closeRole">
        <el-upload
          class="upload-demo"
          action=""
          drag
          :before-upload="submitUpload"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">目前只支持xls、xlsx格式的文件，目前支持批量添加</div>
        </el-upload>
      </el-dialog>
      <el-dialog title="用户角色信息"  :visible.sync='RoleRourcesWith'  @close="closeRole"  >
        <el-descriptions title="用户信息"   >
          <el-descriptions-item label="角色名" >{{checkRoleLists.roleName}}</el-descriptions-item>
          <el-descriptions-item label="用户id">{{checkRoleLists.roleId}}</el-descriptions-item>
          <el-descriptions-item label="用户权限">{{checkRoleLists.roleAuthority}}</el-descriptions-item>
        </el-descriptions>
        <el-table
          :data="RolereRourcesTable"  ref="multipleRolereRourcesTable"   @selection-change="cheakRoleRources"
          stripe
          style="width: 100%"  height="300" >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="resourcesId"
            label="资源id">
          </el-table-column>
          <el-table-column
            prop="resourcesName"
            label="资源名称">
          </el-table-column>
          <el-table-column
            prop="url"
            label="资源url">
          </el-table-column>
          <el-table-column
            prop="path"
            label="资源路径">
          </el-table-column>
          <el-table-column
            prop="component"
            label="资源文件名">
          </el-table-column>
          <el-table-column
            prop="iconcls"
            label="图标">
          </el-table-column>
          <el-table-column
            prop="parentid"
            label="资源节点">
          </el-table-column>
          <el-table-column v-if="hideRoleId=='' "
                           prop="roleId"
                           label="角色id">
          </el-table-column>
        </el-table>
        <el-button type="primary" icon="el-icon-circle-plus" @click="RoleRourcesWith=false">取消</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="addRoleResources">添加</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="delRoleRources">删除</el-button>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "RoleList",
        data(){
          return{
            //输入框
            Roleinput:'',
            Roleinput2:'',
            Roleinput3:'',
            //表格
            Roletable:[],
            //分页器参数
            page:1,
            size:10,
            total:0,
            //添加编辑表单
            formLabelWidth:'100px',
            RoleForm:{},
            dialogFormVisible:false,
            tableNmae:'',
            Operation:'',
            uploadLabelwidth:false,
            //添加资源页面
            RoleRourcesWith:false,
            //获取角色勾选的数据
            checkRoleList:[],
            checkRoleLists:{},
            //获取资源信息
            RolereRourcesTable:[],
            //获取勾选角色资源数据
            obtainRoleRourcesList:[],
            //隐藏角色id
            hideRoleId:'随便乱输的',
          }

        },
      mounted:function( ){
        this.selectRole();
        this.selectRoleResourcesLists();
      },
      methods:{
        //更改当前页条数
        handleSizeChange(size){
          this.size=size;
          this.selectRole();
        },
        //更改当前页数
        handleCurrentChange(page){
          this.page=page;
          this.selectRole();
        },
          //打开用户添加页面
          operAddRole(){
            this.RoleForm={};
            this.tableNmae="角色添加";
            this.dialogFormVisible=true;
            //设置为跳转添加页面
            this.Operation="add";
          },
        //关闭页面
        closeRole(){
            //赋值为空
            this.Roletable={};
            this.dialogFormVisible=false;
            this.uploadLabelwidth=false
        },
        //打开角色编辑
        operEditRole(rows){
          this.tableNmae="角色编辑";
          this.dialogFormVisible=true;
          //设置为跳转添加页面
          this.Operation="edit";
          this.$set(this.RoleForm,'roleId', rows.roleId);
          this.$set(this.RoleForm,'roleName',  rows.roleName);
          this.$set(this.RoleForm,'roleAuthority',  rows.roleAuthority);
        },
        //角色信息查询页面
          selectRole(){
              this.postRequest("/role/selectAllRole",{
                page:this.page,
                size:this.size,
                roleId:this.Roleinput,
                roleName:this.Roleinput2,
                roleAuthority:this.Roleinput3,
              }).then(resp=>{
                this.Roletable = resp.data.rows;
                this.total=resp.data.records;
              })
          },
        //添加角色
        commitRoleOperation(Operation){
            if(Operation=="add"){
              var roleAuthority="ROLE_"+this.RoleForm.roleAuthority;
              this.postRequest("/role/addRole",{
                roleName:this.RoleForm.roleName,
                roleAuthority:roleAuthority,
              }).then(resp=>{
                if (resp && resp.status == 200) {
                  //弹出信息
                  this.$message({message:resp.data.errorMsg});
                  //刷新页面
                  this.selectRole();
                  //清空表单
                  this.dialogFormVisible = false;
                }
              })
            }else if (Operation=="edit"){
              this.postRequests("/role/editRole",this.RoleForm).then(resp=>{
                if (resp && resp.status == 200) {
                  //弹出信息
                  this.$message({message: resp.data.errorMsg});
                  //刷新页面
                  this.selectRole();
                  //清空表单
                  this.dialogFormVisible = false;
                }
              })

            }else{
              //弹出信息
              this.$message({message:"执行程序流程出错"});
            }

        },
        //删除角色
        delRole(rows){
          this.$confirm("是否要删除【"+rows.roleName+"】角色",'提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
          }).then(()=>{
            this.postRequest("/role/delRole",{
              roleId:rows.roleId,
            }).then(resp=>{
              if (resp && resp.status == 200) {
                //弹出信息
                this.$message({message: resp.data.errorMsg});
                //刷新页面
                this.selectRole();
                //清空表单
                this.dialogFormVisible = false;
              }
            })
          }).catch(()=>{
            this.$message({info:'取消删除'});
          })

        },
        //角色导出
        exportRole(){
          window.open("role/exportRole/?pages="+this.page+'&sizes='+this.size);
        },
        //打开角色导入
        operUploadPage(){
          this.uploadLabelwidth=true;
        },
        //文件上传
        submitUpload(file){
          const form = new FormData();
          form.append('file', file);
          this.uploadFileRequest("role/importRole",form).then(resp=>{
            if (resp && resp.status == 200) {
              //弹出信息
              this.$message({message:resp.data.errorMsg});
              //刷新页面
              this.selectRole();
              //关闭表单
              this.uploadLabelwidth = false;
            } else {
              //弹出信息
              //  this.$message({message:resp.data.errorMsg});
              //刷新页面
              this.selectRole();
              //关闭表单
              this.uploadLabelwidth = false;
            }
          })

        },
        //获取角色勾选的数据
        checkRole(selection){
          //勾选数据赋值到exportUserList
          this.checkRoleList=selection;
          this.checkRoleLists=  this.checkRoleList[0];
        },
        //获取角色资源勾选的数据
        cheakRoleRources(selection){
          //勾选数据赋值到
          this.obtainRoleRourcesList=selection;
        },
        //打开角色查看资源页面
        openRoleRourcesWith(){
          if(this.checkRoleList.length==0){
            //弹出信息
            this.$message({message:'请勾选一条数据'});
            return ;
          }else if (this.checkRoleList.length>1) {
            this.$message({message:'请只勾选一条数据'});
            return ;
          }else {
                this.RoleRourcesWith=true;
            /*//查看所有的权限
            this.postRequest("resources/selectRoleResources",{
              roleId:this.checkRoleLists.roleId,
            }).then(resp=>{
              if (resp && resp.status == 200) {
                //把查到的数据进行赋值
                this.RolereRourcesTable=resp.data.rows;
              }
            });*/
            this.$nextTick(()=>{
              //根据用户id查询所有的权限
              this.postRequest("resources/selectSingleRoleResources",{
                roleId:this.checkRoleLists.roleId,
              }).then(resp=>{
                if (resp && resp.status == 200) {
                  //fot循环用户信息表单的数据
                  this.RolereRourcesTable.forEach((row)=>{
                    //for循环当前有权限的数据
                    for(let item of resp.data.rows ){
                      //判断是否存在
                      if(item.resourcesId==row.resourcesId){
                        //存在就勾选
                        this.$refs.multipleRolereRourcesTable.toggleRowSelection(row,true);

                      }
                    }
                  });
                }
              });

            });
          }
        },
        selectRoleResourcesLists(){
          //查看所有的权限
         this.postRequest("resources/selectRoleResources",{
           roleId:0,
         }).then(resp=>{
           if (resp && resp.status == 200) {
             //把查到的数据进行赋值
             this.RolereRourcesTable=resp.data.rows;
           }
         });
        },
        //勾选添加用户权限数据
        addRoleResources(){
          if(this.obtainRoleRourcesList.length===0){
            this.$message({message:"用户角色不能为空，请勾选用户角色"});
            return false
          }
          this.postRequests("resources/addRoleResources",this.obtainRoleRourcesList)
            .then(resp=>{
              if (resp && resp.status == 200) {
                //输出信息
                this.$message({message:resp.data.errorMsg});
                this.RoleRourcesWith=false;
              }
            })
        },
        //删除非勾选用户权限数据
        delRoleRources(){
          if(this.obtainRoleRourcesList.length===0){
            this.$message({message:"用户角色不能为空，请勾选用户角色"});
            return false
          }
          this.$confirm("是否要删除权限",'提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
          }).then(()=>{
            this.postRequests("resources/delRoleResources",this.obtainRoleRourcesList)
              .then(resp=>{
                if (resp && resp.status == 200) {
                  // //输出信息
                  this.$message({message:resp.data.errorMsg});
                  this.RoleRourcesWith=false;
                }
              })
          }).catch(()=>{
            this.$message({info:'取消删除'});
          });

        }

      }

    }
</script>

<style scoped>

</style>
